import React, { useEffect, useState } from "react";

import { Statistic, Row, Col, Card, Divider, Table, message } from "antd";
import {
  ArrowUpOutlined,
  ArrowDownOutlined,
  AlertOutlined,
} from "@ant-design/icons";
import { getDownloadLog, getSummary } from "../../../../service/fileinfo";

const columns = [
  {
    title: "序号",
    dataIndex: "id",
    width: "5%",
    align: "center",
    render: (txt, record, index) => index + 1,
  },
  {
    title: "下载日期",
    dataIndex: "downloadDate",
    width: "10%",
    align: "center",
  },
  {
    title: "数据地区",
    dataIndex: "dataCity",
    width: "10%",
    align: "center",
  },
  {
    title: "数据类别",
    dataIndex: "dataType",
    width: "10%",
    align: "center",
  },
  {
    title: "数据量(MB)",
    dataIndex: "dataSize",
    width: "10%",
    align: "center",
  },
  {
    title: "用户",
    dataIndex: "userName",
    width: "10%",
    align: "center",
  },
];

function SumDownInfo() {
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);
  const [sumDownInfo, setSumDownInfo] = useState({
    upload: 0, 
    download: 0,
    downChampian: "enjoy",
    popularDataset: "北京+汽车",
  });
  useEffect(() => {
    getDownloadLog({
      page: 1,
      pageSize: 10,
    })
      .then((res) => {
        if (res.status === "200") {
          setDataSource(res.result);
          setTotal(res.total);
        } else {
          message.info("获取下载失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });

    getSummary()
      .then((res) => {
        if (res.status === "200") {
          setSumDownInfo(res.result);
        } else {
          message.info("获取下载失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  //翻页函数
  const nextPage = (page, pageSize) => {
    getDownloadLog({
      page: page,
      pageSize: pageSize,
    })
      .then((res) => {
        if (res.status === "200") {
          setDataSource(res.result);
          message.info(res.msg);
        } else {
          message.info("获取下载失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div className="site-statistic-demo-card" style={{ height: "100%" }}>
      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Card>
            <Statistic
              title="总上传数据量"
              value={sumDownInfo.upload}
              precision={2}
              valueStyle={{ color: "#3f8600" }}
              prefix={<ArrowUpOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <Statistic
              title="总下载数据量"
              value={sumDownInfo.download}
              precision={2}
              valueStyle={{ color: "#cf1322" }}
              prefix={<ArrowDownOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <Statistic
              title="下载冠军"
              value={sumDownInfo.downChampian}
              precision={2}
              valueStyle={{ color: "red" }}
              prefix={<AlertOutlined />}
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <Statistic
              title="最受欢迎数据"
              value={sumDownInfo.popularDataset}
              precision={2}
              valueStyle={{ color: "blue" }}
            />
          </Card>
        </Col>
      </Row>
      <Divider style={{ color: "gray" }} orientation="left" plain>
        最近下载记录
      </Divider>
      <Table
        scroll={{
          scrollToFirstRowOnChange: true,
          x: "max-content",
          y: "calc(100vh - 600px)",
        }}
        rowKey={(txt) => {
          return txt.userName + txt.dataCity + txt.dataType + txt.downloadDate;
        }}
        bordered
        columns={columns}
        dataSource={dataSource}
        pagination={{
          total: total,
          pageSize: 10,
          onChange: (page, pageSize) => nextPage(page, pageSize),
        }}
      />
    </div>
  );
}

export default SumDownInfo;
